<template>
  <!--在线包投放链接-->
  <div class="content_panel project_modules deal-list">
    <div class="content_panel_top">
      <h3 class="panel_title">
        <span>{{ $t('common.generateChannelLink') }}</span>
      </h3>
      <el-form ref="form" :model="form" :rules="rules" class="module_form" label-position="left" :label-width="labelWidth">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="appPackage" :label="$t('system.appPackage')">
              <!--app包名-->
              <el-select v-model="form.appPackage" :placeholder="$t('verify.plsChoose')" clearable style="width:100%;">
                <el-option v-for="item in appList" :key="item.id" :value="item.packageName" :label="`${item.packageName}[${item.name}]`"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="utmSource" :label="$t('common.customChannelName')">
              <!--自定义渠道名-->
              <el-input v-model="form.utmSource" @keyup.native="replaceSpaces" :placeholder="$t('verify.plsInput')" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button @click="generate" type="primary">{{$t('common.generateChannelLink')}}</el-button>
      </el-form>
    </div>
    <div class="module_content">
      <h3>{{$t('common.channelLinkDetail')}}</h3>
      <el-row>
        <el-col :span="5">{{$t('system.appPackage')}} :</el-col>
        <el-col :span="19">{{detailInfo.appPackage}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">{{$t('common.customChannelName')}} :</el-col>
        <el-col :span="19">{{detailInfo.utmSource}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">{{$t('common.longLink')}} :</el-col>
        <el-col :span="19">{{detailInfo.longLink}}<a v-if="detailInfo.longLink !== '--'" class="ml-20"
            v-clipboard:copy="detailInfo.longLink"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError" href="javascript:void(0);">{{ $t('common.copy')}}</a>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">{{$t('common.shortLinkGenerateLink')}} :</el-col>
        <el-col :span="19"><a target="_blank" href="https://bitly.com">{{detailInfo.shortLink}}</a></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  let that = null;

  export default {
    name: 'operation-channelLinkManage-onlinePackge',
    components: {},
    data() {
      return {
        appList: [],
        form: {
          appPackage: '',
          utmSource: ''
        },
        detailInfo: {
          appPackage: '--',
          utmSource: '--',
          longLink: '--',
          shortLink: 'https://bitly.com'
        },
        labelWidth: this.$i18n.locale === 'zhCN' ? '110px' : '180px',
        rules: {
          appPackage: [{ required: true, message: this.$t('verify.plsChoose') }],
          utmSource: [{ required: true, message: this.$t('verify.plsInput') }]
        },
        formLabelWidth: this.$i18n.locale === 'en' ? '225px' : '135px'
      };
    },
    methods: {
      // 生成渠道链接
      generate() {
        this.$refs.form.validate(val => {
          if (val) {
            Object.assign(this.detailInfo, this.form);
            this.detailInfo.longLink = `https://play.google.com/store/apps/details?id=${encodeURIComponent(
              this.form.appPackage
            )}&referrer=${encodeURIComponent(
              `utm_source=${this.form.utmSource}`
            )}`;
          }
        });
      },
      replaceSpaces() {
        this.form.utmSource = this.form.utmSource.replace(/\s+/g, '');
      },
      getAppList() {
        const params = {
          appListDomain: this.$storage.get('user').domain
        };
        this.$api.systemManage.getAppListdomain(params).then(res => {
          const { status, data, error } = res;
          if ('1' === status && error === '00000000' && data instanceof Array) {
            this.appList = data;
          }
        });
      },
      onCopy: function (e) {
        this.$message.success(this.$t('common.copied'));
      },
      onError: function (e) {
        this.$message.error('Failed to copy texts');
      }
    },
    filters: {},
    created() {
      this.getAppList();
    }
  };
</script>

<style lang="scss">
  [data-page='operation-channelLinkManage-onlinePackge'] {
    .noteRed {
      color: red;
    }
    .iptWidth {
      width: 200px;
    }
    .el-col {
      padding-left: 10px;
    }
    .ml-20 {
      margin-left: 20px;
    }
    .module_content {
      word-break: break-all;
      white-space: pre-wrap;
      h3 {
        font-size: 16px;
        color: #47c5b2;
      }
      .el-col {
        margin-top: 30px;
      }
    }
  }
</style>
